<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>appointment registration</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
       body{
            background: rgb(248,248,248);
       }
       main{
           width:100%;
           /* height:1069px; */
       }
       .main_body{
           width:62.5%;
           height:776px;
           margin: 0px auto;
       }
       .main_body_left{
           margin-top:36px;
           width:24%;  /*288px*/
           float: left;
       }
       .main_body_left_top{
           width:100%;
           height: 114px;
           background: #ffffff;
           box-shadow: -3px 3px 3px #dadada;
           padding-top:25px;
       }
       .main_body_left_top h4{
           margin-left:20px;
           font-size:24px;
           color:#57c7f6;
       }
       .main_body_left_top p{
            margin-left:20px;
            margin-top:9px;
            font:12px/19px 'simhei';
            width:87%;
            color: #b9b9b9;
       }
       .main_body_left_center{
           width:100%;
           height: 177px;
           background: #ffffff;
           box-shadow: -3px 3px 3px #dadada;
           margin-top: 1px;
           padding-top:20px;
       }
       .main_body_left_center li{
           width:100%;
           height:30px;
           text-align: center;
           font:15px/30px 'simhei';
           margin-top:10px;
           position: relative;
       }
       .main_body_left_center li div{
           width:8px;
           height:30px;
           background:#57c7f6;
           position: absolute;
           display: none;
       }
       .main_body_left_bottom{
           width:100%;
           height:356px;
           background: #ffffff;
           box-shadow: -3px 3px 3px #dadada;
           margin-top:20px;
       }
       .main_body_left_bottom p:nth-of-type(1){
           color:#333333;
           font-weight: bolder;
           font-size:19px;
           padding-top:15px;
           width:100%;
           height:19px ;
           text-align: center;
       }
       .main_body_left_bottom p:nth-of-type(2), .main_body_left_bottom p:nth-of-type(3){
           color:#333333;
           font-size:11px;
           margin-top:9px;
           width:100%;
           text-align: center;
           
       }
       .main_body_left_bottom h4:nth-of-type(1), .main_body_left_bottom h4:nth-of-type(2){
           width:88px;
           height:88px;
           background: url("img/code.png") 100% 100% no-repeat;
           margin:18px auto 0px;
       }
       .main_body_left_bottom p:nth-of-type(4), .main_body_left_bottom p:nth-of-type(5){
            color:#c4c4c4;
           font-size:11px;
           margin-top:7px;
           width:100%;
           text-align: center;
       }
       .main_content {
           height:1050px;
       }
       .main_content iframe{
           width:100%;
           height:100%;
           border:none;
       }
       .main .comment{
           width:74.666667%;
           float:right;
           margin-top:30px;
           box-shadow: -3px 3px 3px #dadada;
           background: #ffffff;
           display: none;
       }
       .commentTitle{
            width:100%;
            height: 40px;
            font:18px/40px 'simhei';
            border-bottom: 1px solid #999999;
        }
        .commentTitle_left{
            float: left;
            margin-left: 10px;
        }
        .commentTitle_right{
            float: right;
            margin-right: 10px;
        }
        #commentInner{
            width:90%;
            margin-left:4%;
            height:100px;
            border:1px solid #eeeeee;
            background: #f7f7f7;
            margin-top:18px;
        }
       #commentSubmit{
            width:80px;
            height: 36px;
            background:#57c7f6;
            color: #ffffff;
            font:16px/36px 'simhei';
            text-align: center;
            border:none;
            border-radius: 5px;
            margin-left:4%; 
            cursor: pointer;
            margin-top:15px;
        }
        .commentList{
            width:90%;
            height:28px;
            font:16px/28px 'simhei';
            margin-left:4%;
            margin-top:30px;
            border-bottom: 1px solid #e3e3e3;
        }
        .commentUl{
            width:90%;
            margin-left:4%;
            border-bottom: 1px solid #b5b5b5;
        }
        .oLiLeft{
            width:13%;
            height:80px;
            background: url("img/userImg.png") 100% 100% no-repeat;
            float: left;
        }
        .oLiRight{
            width:85%;
            height: 80px;
            float:left;
            margin-left:2%;
        }
    </style>
</head>
<body>
    <header class="header">
        <div class="header_up">
            <h2>YOUR LOGO</h2>
            <label class="header_up_lab"><span class="fa fa-search"></span><input type="text" placeholder="请输入科室名/医生名/疾病名" class="text" ></label>
            <input type="text" value="搜索" class="search">
            <p class="adm"><a href=""> <span class="fa fa-user"></span>&nbsp; / 管理员登录</a></p>
        </div>
    </header>
    <nav>
        <div class="nav_a">
            <a href="首页.html">首页</a>
            <a href="appointment.html">预约挂号</a>
            <a href="Onlinevisit.html">在线问诊</a>
            <a href="./personal/index.html">个人中心</a>
            <a href="healthinquiry.html"  class="active">健康咨询</a>
            <a href="illnessinquiry.html">疾病专题</a>
        </div>
    </nav>
    <main class="main clear" id="main">
        <div class="main_top">
            <span>当前位置：首页 > </span>
            <strong>健康咨询</strong>
        </div>
        <div class="main_body_left clear">
            <div class="main_body_left_top">
                <h4>健康咨询</h4>
                <p>帮助普通患者快速找到选定条件下可预约的专家(目前只支持部分医院)</p>
            </div>
            <div class="main_body_left_center">
                <ul>
                    <li><div class="Bg"></div> 全部分类</li>
                    <li><div class="Bg"></div>健康咨询一</li>
                    <li><div class="Bg"></div>健康咨询二</li>
                </ul>
            </div>
            <div class="main_body_left_bottom">
                <p>手机挂号10秒搞定！</p>
                <p>立即扫描下载微医APP或</p>
                <p>关注微信公众号,让看病变得更简单！</p>
                <h4></h4>
                <p>扫码下载手机APP</p>
                <h4></h4>
                <p>扫码关注微信公众号</p>
            </div>
        </div>
        <div class="main_content" id="main_content">
            <iframe src="healthinquiryText.html" id="iframe" ></iframe>
        </div>
        <div class="comment" id="comment">
            <div class="commentTitle clear">
                <div class="commentTitle_left">我要评论</div>
                <div class="commentTitle_right">您也可以登录后再评论：<a href="./登录.html">登录</a>|<a href="./注册.html"> 注册</a></div>
            </div>
            <textarea  id="commentInner"></textarea>
            <input type="button" id="commentSubmit" value="发表评论">
            <div class="commentList">评论列表</div>
            <ul class="commentUl"></ul>
        </div> 
    </main>
    <footer>
        <div class="footer_up">
            <div class="footer_up_con">
               <div class="footer_up_con_fir">
                   <p class="footer_up_con_fir1">
                       <a href="">联系我们</a>
                       <span>Content us</span>
                   </p>
                   <p class="footer_up_con_fir2">关注</p>
                   <p class="footer_up_con_fir3">您身边的家庭医生</p>
               </div>
               <div class="footer_up_con_two">
                    <div class="footer_up_con_two_img">
                        <span><img src="img/weibo.png" alt=""></span>
                        <span><img src="img/weixin.png" alt=""></span>
                        <span><img src="img/qq.png" alt=""></span>
                    </div>
                    <div class="footer_up_con_two_adress">
                        <p>地址: 北京市朝阳区国贸写字楼B座</p>
                        <p>电话: 400612358</p>
                        <p>邮箱: infor@abgj.com</p>
                    </div>
                    <div class="footer_up_con_two_phone">
                       <p>邮编: 400160</p>
                       <p>手机: 138466066</p>
                    </div>
               </div>
              
        </div>
       </div>
       <div class="footer_end">
            <p>京公网安备11010125610012号京ICP证150277号京ICP备15002532号</p>
        </div>
       </footer>
</body>
<script>
    var oBodyCenter=document.getElementsByClassName("main_body_left_center")[0];
    var oLi=oBodyCenter.getElementsByTagName("li");
    var oDiv=document.getElementsByClassName("Bg");
     oDiv[0].style.display='block';
     oLi[0].style.color='#57c7f6';
    for(var i=0; i<oLi.length;i++){
        oLi[i].index=i;
        oLi[i].onclick=function(){
            for(var j=0;j<oDiv.length;j++){
                oDiv[j].style.display='none';
                oLi[j].style.color='#333333';
            }
            oDiv[this.index].style.display='block';
            oLi[this.index].style.color='#57c7f6';
        }
    }
    var oCommentSubmit=document.getElementById("commentSubmit");
    var oCommentInner=document.getElementById("commentInner");
    var oCommentUl=document.getElementsByClassName("commentUl")[0];
    var nowtime=new Date();
    var nowYear=nowtime.getFullYear();
    var nowMonth=nowtime.getMonth();
    var nowDay=nowtime.getDate();
    oCommentSubmit.onclick=function(){
        if(oCommentInner.value==''){
            alert('请输入内容')
        }else{
        var oLi=document.createElement("li");
        oLi.style.width='100%';
        oLi.style.height='120px';
        oLi.style.fontSize='16px';
        oLi.setAttribute("class","clear");
        oLi.style.borderBottom='1px dashed #b5b5b5';
        oLi.style.paddingTop='20px';
        oCommentUl.appendChild(oLi);
        var oImg=document.createElement("div");
        oImg.className='oLiLeft';
        oLi.appendChild(oImg);
        var oText=document.createElement("div");
        oText.className='oLiRight';
        oLi.appendChild(oText);
        var oPtop=document.createElement("P");
        oPtop.style.width='100%';
        oPtop.style.height='40px'
        oPtop.style.lineHeight='40px';
        oText.appendChild(oPtop);
        var ouserName=document.createElement("span");
        ouserName.innerHTML='健康管理者';
        ouserName.style.color='#57c7f6'
        oPtop.appendChild(ouserName);
        var oTime=document.createElement("span");
        oTime.style.float='right';
        oTime.innerHTML=nowYear+'-'+(nowMonth+1)+'-'+nowDay;
        oTime.style.color='#999999';
        oPtop.appendChild(oTime);
        var oPbottom=document.createElement("P");
        oPbottom.style.width='100%';
        oPbottom.style.height='60px';
        oPbottom.style.overflow='auto';
        oPbottom.innerHTML=oCommentInner.value;
        oText.appendChild(oPbottom);
        oCommentInner.value='';
        }   
    }
</script>
</html>